<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>探索音乐 - 声破天</title>
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/explore.css">
    <link rel="stylesheet" href="assets/css/player-bar.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
    <div class="main-container">
        <!-- 侧边导航栏 -->
        <aside class="sidebar">
            <div class="logo">
                <svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="25" cy="25" r="20" fill="#1DB954" />
                    <path d="M18 27.5C18 27.5 22 23.5 25 23.5C28 23.5 32 27.5 32 27.5" stroke="black" stroke-width="2"
                        fill="none" />
                    <path d="M16 21.5C16 21.5 22 15.5 25 15.5C28 15.5 34 21.5 34 21.5" stroke="black" stroke-width="2"
                        fill="none" />
                    <path d="M14 15.5C14 15.5 21 7.5 25 7.5C29 7.5 36 15.5 36 15.5" stroke="black" stroke-width="2"
                        fill="none" />
                    <text x="50" y="32" font-family="Arial, sans-serif" font-size="24" font-weight="bold"
                        fill="white">声破天</text>
                </svg>
            </div>
            <nav class="main-nav">
                <ul>
                    <li class="nav-item">
                        <a href="index.html"><i class="fas fa-home"></i> <span data-i18n="nav_home">首页</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="search.html"><i class="fas fa-search"></i> <span data-i18n="nav_search">搜索</span></a>
                    </li>
                    <li class="nav-item active">
                        <a href="explore.html"><i class="fas fa-compass"></i> <span
                                data-i18n="nav_explore">探索</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="library.html"><i class="fas fa-book"></i> <span data-i18n="nav_library">音乐库</span></a>
                    </li>
                </ul>
            </nav>

            <div class="library-nav">
                <div class="library-header">
                    <h2><i class="fas fa-plus-square"></i> <span data-i18n="create_playlist">创建播放列表</span></h2>
                </div>
                <div class="library-items">
                    <div class="liked-songs">
                        <div class="liked-gradient">
                            <i class="fas fa-heart"></i>
                        </div>
                        <h3 data-i18n="liked_songs">我喜欢的歌曲</h3>
                        <p><span data-i18n="playlist">播放列表</span> • 32 <span data-i18n="songs">首歌曲</span></p>
                    </div>
                    <div class="playlists">
                        <div class="playlist-item">
                            <a href="#" id="following-link" style="text-decoration: none; color: inherit;">
                                <h3 data-i18n="playlist_1">我的关注</h3>
                                <p data-i18n="playlist_by_user">播放列表 • 用户</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="content">
            <header class="top-bar">
                <div class="navigation-buttons">
                    <button class="nav-btn"><i class="fas fa-chevron-left"></i></button>
                    <button class="nav-btn"><i class="fas fa-chevron-right"></i></button>
                </div>
                <div class="user-menu">
                    <div class="language-selector">
                        <div class="language-options">
                            <button class="language-btn" data-lang="zh-CN">简体中文</button>
                            <button class="language-btn" data-lang="en">English</button>
                            <button class="language-btn" data-lang="zh-TW">繁體中文</button>
                        </div>
                    </div>
                    <div class="auth-buttons">
                        <a href="login.html" class="login-btn"><i class="fas fa-sign-in-alt"></i> <span
                                data-i18n="login">登录</span></a>
                        <a href="register.html" class="register-btn"><i class="fas fa-user-plus"></i> <span
                                data-i18n="register">注册</span></a>
                    </div>
                </div>
            </header>

            <!-- 探索页面内容 -->
            <div class="explore-container">
                <!-- 页面标题 -->
                <div class="page-header">
                    <h1>探索</h1>
                    <p>发现新音乐、播放列表和艺术家</p>
                </div>

                <!-- 发现入口卡片 -->
                <section class="discovery-links">
                    <div class="category-grid">
                        <a href="charts.html" class="category-card"
                            style="background: linear-gradient(135deg, #FF5E3A, #FF2A68);">
                            <h2>排行榜</h2>
                            <p>查看热门音乐排行</p>
                            <i class="fas fa-chart-line"></i>
                        </a>
                        <a href="#" class="category-card"
                            style="background: linear-gradient(135deg, #3498DB, #2980B9);">
                            <h2>新发行</h2>
                            <p>最新上线的音乐</p>
                            <i class="fas fa-calendar-alt"></i>
                        </a>
                        <a href="#" class="category-card"
                            style="background: linear-gradient(135deg, #9B59B6, #8E44AD);">
                            <h2>播客</h2>
                            <p>发现精彩播客节目</p>
                            <i class="fas fa-microphone-alt"></i>
                        </a>
                        <a href="#" class="category-card"
                            style="background: linear-gradient(135deg, #1ABC9C, #16A085);">
                            <h2>直播</h2>
                            <p>音乐现场直播</p>
                            <i class="fas fa-broadcast-tower"></i>
                        </a>
                        <a href="#" class="category-card"
                            style="background: linear-gradient(135deg, #F1C40F, #F39C12);">
                            <h2>MV</h2>
                            <p>精选音乐视频</p>
                            <i class="fas fa-film"></i>
                        </a>
                        <a href="#" class="category-card"
                            style="background: linear-gradient(135deg, #2ECC71, #27AE60);">
                            <h2>电台</h2>
                            <p>精选主题电台</p>
                            <i class="fas fa-radio"></i>
                        </a>
                    </div>
                </section>

                <!-- 音乐分类导航 -->
                <section class="genre-navigator">
                    <h2 class="section-title">浏览分类</h2>
                    <div class="genre-tabs">
                        <button class="genre-tab active">全部</button>
                        <button class="genre-tab">流行</button>
                        <button class="genre-tab">摇滚</button>
                        <button class="genre-tab">民谣</button>
                        <button class="genre-tab">电子</button>
                        <button class="genre-tab">嘻哈</button>
                        <button class="genre-tab">爵士</button>
                        <button class="genre-tab">古典</button>
                        <button class="genre-tab">R&B</button>
                        <button class="genre-tab">金属</button>
                        <button class="genre-tab">乡村</button>
                        <button class="genre-tab">蓝调</button>
                    </div>
                </section>

                <!-- 编辑推荐 -->
                <section class="editors-picks">
                    <h2 class="section-title">编辑推荐</h2>
                    <div class="playlist-carousel">
                        <div class="featured-card">
                            <div class="featured-card-img"
                                style="background: linear-gradient(135deg, #FF5E3A, #FF2A68);">
                                <img src="assets/images/covers/cover10.jpg" alt="编辑推荐">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>2024年度必听歌单</h3>
                            <p>编辑精选的年度热门歌曲</p>
                        </div>
                        <div class="featured-card">
                            <div class="featured-card-img"
                                style="background: linear-gradient(135deg, #3498DB, #2980B9);">
                                <img src="assets/images/covers/cover9.jpg" alt="编辑推荐">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>情绪疗愈歌单</h3>
                            <p>适合放松心情的轻音乐</p>
                        </div>
                        <div class="featured-card">
                            <div class="featured-card-img"
                                style="background: linear-gradient(135deg, #9B59B6, #8E44AD);">
                                <img src="assets/images/covers/cover8.jpg" alt="编辑推荐">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>新生代音乐人</h3>
                            <p>发掘有潜力的新兴音乐人</p>
                        </div>
                        <div class="featured-card">
                            <div class="featured-card-img"
                                style="background: linear-gradient(135deg, #1ABC9C, #16A085);">
                                <img src="assets/images/covers/cover7.jpg" alt="编辑推荐">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>民谣精选</h3>
                            <p>细腻感人的民谣歌曲</p>
                        </div>
                        <div class="featured-card">
                            <div class="featured-card-img"
                                style="background: linear-gradient(135deg, #F1C40F, #F39C12);">
                                <img src="assets/images/covers/cover6.jpg" alt="编辑推荐">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>电子舞曲精选</h3>
                            <p>让你忍不住跳舞的EDM</p>
                        </div>
                    </div>
                </section>

                <!-- 心情分类 -->
                <section class="mood-categories">
                    <h2 class="section-title">按心情浏览</h2>
                    <div class="mood-grid">
                        <div class="mood-card" style="background: linear-gradient(135deg, #FF416C, #FF4B2B);">
                            <h3>欢快</h3>
                            <i class="far fa-laugh-beam"></i>
                        </div>
                        <div class="mood-card" style="background: linear-gradient(135deg, #4568DC, #B06AB3);">
                            <h3>放松</h3>
                            <i class="far fa-smile"></i>
                        </div>
                        <div class="mood-card" style="background: linear-gradient(135deg, #0F2027, #2C5364);">
                            <h3>忧郁</h3>
                            <i class="far fa-sad-tear"></i>
                        </div>
                        <div class="mood-card" style="background: linear-gradient(135deg, #8E2DE2, #4A00E0);">
                            <h3>浪漫</h3>
                            <i class="far fa-heart"></i>
                        </div>
                        <div class="mood-card" style="background: linear-gradient(135deg, #F7971E, #FFD200);">
                            <h3>精力充沛</h3>
                            <i class="far fa-grin-stars"></i>
                        </div>
                        <div class="mood-card" style="background: linear-gradient(135deg, #11998e, #38ef7d);">
                            <h3>专注</h3>
                            <i class="far fa-lightbulb"></i>
                        </div>
                    </div>
                </section>

                <!-- 热门艺术家 -->
                <section class="popular-artists">
                    <h2 class="section-title">热门艺术家</h2>
                    <div class="artist-slider">
                        <div class="artist-card">
                            <div class="artist-avatar">
                                <img src="assets/images/artists/artist1.jpg" alt="周杰伦">
                            </div>
                            <h3>周杰伦</h3>
                            <p>艺术家</p>
                        </div>
                        <div class="artist-card">
                            <div class="artist-avatar">
                                <img src="assets/images/artists/artist3.jpg" alt="陈奕迅">
                            </div>
                            <h3>陈奕迅</h3>
                            <p>艺术家</p>
                        </div>
                        <div class="artist-card">
                            <div class="artist-avatar">
                                <img src="assets/images/artists/artist5.jpg" alt="林俊杰">
                            </div>
                            <h3>林俊杰</h3>
                            <p>艺术家</p>
                        </div>
                        <div class="artist-card">
                            <div class="artist-avatar">
                                <img src="assets/images/artists/artist2.jpg" alt="Taylor Swift">
                            </div>
                            <h3>Taylor Swift</h3>
                            <p>艺术家</p>
                        </div>
                        <div class="artist-card">
                            <div class="artist-avatar">
                                <img src="assets/images/artists/artist6.jpg" alt="Billie Eilish">
                            </div>
                            <h3>Billie Eilish</h3>
                            <p>艺术家</p>
                        </div>
                        <div class="artist-card">
                            <div class="artist-avatar">
                                <img src="assets/images/artists/artist4.jpg" alt="邓紫棋">
                            </div>
                            <h3>邓紫棋</h3>
                            <p>艺术家</p>
                        </div>
                    </div>
                </section>

                <!-- 年代分类 -->
                <section class="decade-browser">
                    <h2 class="section-title">穿越年代</h2>
                    <div class="decade-grid">
                        <div class="decade-card" style="background-image: url('assets/images/covers/cover1.jpg');">
                            <div class="decade-overlay">
                                <h3>60年代</h3>
                            </div>
                        </div>
                        <div class="decade-card" style="background-image: url('assets/images/covers/cover2.jpg');">
                            <div class="decade-overlay">
                                <h3>70年代</h3>
                            </div>
                        </div>
                        <div class="decade-card" style="background-image: url('assets/images/covers/cover3.jpg');">
                            <div class="decade-overlay">
                                <h3>80年代</h3>
                            </div>
                        </div>
                        <div class="decade-card" style="background-image: url('assets/images/covers/cover4.jpg');">
                            <div class="decade-overlay">
                                <h3>90年代</h3>
                            </div>
                        </div>
                        <div class="decade-card" style="background-image: url('assets/images/covers/cover5.jpg');">
                            <div class="decade-overlay">
                                <h3>00年代</h3>
                            </div>
                        </div>
                        <div class="decade-card" style="background-image: url('assets/images/covers/cover6.jpg');">
                            <div class="decade-overlay">
                                <h3>10年代</h3>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 地区音乐 -->
                <section class="regional-music">
                    <h2 class="section-title">探索世界音乐</h2>
                    <div class="region-grid">
                        <div class="region-card" style="background-image: url('assets/images/categories/chinese.jpg');">
                            <div class="region-overlay">
                                <h3>中国</h3>
                            </div>
                        </div>
                        <div class="region-card" style="background-image: url('assets/images/categories/dance.jpg');">
                            <div class="region-overlay">
                                <h3>韩国</h3>
                            </div>
                        </div>
                        <div class="region-card" style="background-image: url('assets/images/categories/focus.jpg');">
                            <div class="region-overlay">
                                <h3>日本</h3>
                            </div>
                        </div>
                        <div class="region-card" style="background-image: url('assets/images/categories/hiphop.jpg');">
                            <div class="region-overlay">
                                <h3>美国</h3>
                            </div>
                        </div>
                        <div class="region-card" style="background-image: url('assets/images/categories/jazz.jpg');">
                            <div class="region-overlay">
                                <h3>英国</h3>
                            </div>
                        </div>
                        <div class="region-card" style="background-image: url('assets/images/categories/rock.jpg');">
                            <div class="region-overlay">
                                <h3>拉丁美洲</h3>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </main>
    </div>

    <!-- 底部播放器 -->
    <footer class="player-bar">
        <div class="now-playing">
            <div class="track-info">
                <div class="track-image">
                    <img src="assets/images/covers/cover2.jpg" alt="当前播放歌曲">
                </div>
                <div class="track-details">
                    <h4 class="track-name">当前</h4>
                    <p class="artist-name">晴天 - 周杰伦</p>
                </div>
            </div>
            <div class="track-actions">
                <button class="action-btn"><i class="far fa-heart"></i></button>
                <button class="action-btn"><i class="fas fa-external-link-alt"></i></button>
            </div>
        </div>

        <div class="player-controls">
            <div class="control-buttons">
                <button class="control-btn"><i class="fas fa-random"></i></button>
                <button class="control-btn"><i class="fas fa-step-backward"></i></button>
                <button class="control-btn play-btn"><i class="fas fa-play"></i></button>
                <button class="control-btn"><i class="fas fa-step-forward"></i></button>
                <button class="control-btn"><i class="fas fa-redo"></i></button>
            </div>
            <div class="playback-bar">
                <span class="current-time">0:00</span>
                <div class="progress-bar">
                    <div class="progress"></div>
                    <div class="progress-handle"></div>
                </div>
                <span class="total-time">4:29</span>
            </div>
        </div>

        <div class="player-options">
            <button class="option-btn"><i class="fas fa-list"></i></button>
            <button class="option-btn"><i class="fas fa-desktop"></i></button>
            <div class="volume-control">
                <button class="option-btn"><i class="fas fa-volume-up"></i></button>
                <div class="volume-bar">
                    <div class="volume-level"></div>
                    <div class="volume-handle"></div>
                </div>
            </div>
        </div>
    </footer>

    <script src="assets/js/app.js"></script>
    <script src="assets/js/i18n.js"></script>
    <script src="assets/js/player.js"></script>
    <script src="assets/js/navigation.js"></script>
    <script src="assets/js/sidebar-utils.js"></script>
</body>

</html>